<template>
  <!-- v-pagePermissions="pagePermissions"  -->
  <div class="white-bg commonBoxmp">
    <el-scrollbar class="HeightAuto">
      <div class="">
        <el-button type="primary" @click="downDom">下载合同</el-button>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import Card from "/@/views/dashboard/analysis/card.vue";
import { saveAs } from "file-saver";
import * as htmlparser2 from "htmlparser2";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
const dom = htmlparser2.parseDocument(`
<div id="w-e-textarea-1" data-slate-editor="" data-slate-node="value" suppresscontenteditablewarning="" role="textarea" spellcheck="true" autocorrect="true" autocapitalize="true" contenteditable="true"><p id="w-e-element-5" data-slate-node="element"><span id="w-e-text-4" data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true">模拟 Ajax 异步设置内容</span></span></span></p><p id="w-e-element-6" data-slate-node="element"><span id="w-e-text-7" data-slate-node="text"><span data-slate-leaf="true"><span data-slate-string="true" style="color: rgb(231, 95, 51);">asdasd</span></span></span></p></div>
`);
console.log(dom);
const internalInstance = getCurrentInstance(); //获取当前实例
// const route = internalInstance?.appContext.config.globalProperties.$route;
const router = useRouter();
const route = useRoute();
import { Document, Packer, Paragraph, TextRun } from "docx";
const downDom = () => {
  const doc = new Document({
    sections: [
      {
        properties: {},
        children: [
          new Paragraph({
            children: [
              new TextRun("Hello World"),
              new TextRun({
                text: "Foo Bar",
                bold: true,
                color: "rgb(231, 95, 51)",
              }),
              new TextRun({
                text: "\tGithub is the best",
                bold: true,
              }),
            ],
          }),
          new Paragraph({
            children: [
              new TextRun("Hello World"),
              new TextRun({
                text: "Foo Bar",
                bold: true,
                color: "#c48c48",
              }),
              new TextRun({
                text: "\tGithub is the best",
                bold: true,
              }),
            ],
          }),
        ],
      },
    ],
  });
  Packer.toBlob(doc).then((blob) => {
    console.log(blob);
    saveAs(blob, "example.docx");
    console.log("Document created successfully");
  });
};
// console.log(docx)

/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const dialogVisible = ref(true);
const state = reactive({});

onMounted(() => {});
</script>

<style scoped lang="scss"></style>
